<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .preview_wrap {
      width: 400px;
      height: 590px;
      margin: 100px 150px;
    }

    .preview_img {
      position: relative;
      height: 398px;
      border: 1px solid #ccc;
    }

    .mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 300px;
      background: #FEDE4F;
      opacity: .5;
      border: 1px solid #ccc;
      cursor: move;
    }

    .big {
      display: none;
      position: absolute;
      left: 410px;
      top: 0;
      width: 500px;
      height: 500px;
      background-color: pink;
      z-index: 999;
      border: 1px solid #ccc;
      overflow: hidden;
    }

    .big img {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <!-- 产品介绍模块 -->
  <div class="product_intro clearfix">
    <!-- 预览区域 -->
    <div class="preview_wrap fl">
      <div class="preview_img">
        <img src="./img/small.png" alt="">
        <div class="mask"></div>
        <div class="big">
          <img src="./img/big.jpg" alt="" class="bigImg">
        </div>
      </div>
    </div>

    <script>
      window.addEventListener('load', function () {
        var preview_img = document.querySelector('.preview_img');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
        preview_img.addEventListener('mouseover', function () {
          mask.style.display = 'block';
          big.style.display = 'block';
        })
        preview_img.addEventListener('mouseout', function () {
          mask.style.display = 'none';
          big.style.display = 'none';
        })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
        // 注意：拿坐标的时候小心父亲，父亲如果有定位的话，是相对于父亲拿坐标的
        preview_img.addEventListener('mousemove', function (e) {
          // (1). 先计算出鼠标在盒子内的坐标
          var x = e.pageX - this.offsetLeft;
          var y = e.pageY - this.offsetTop;
          // console.log(x, y);
          // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
          // (3) 我们mask 移动的距离
          // 黄色盒子是跟着我们鼠标一起走的
          // offsetWidth 高度是 150
          var maskX = x - mask.offsetWidth / 2;
          var maskY = y - mask.offsetHeight / 2;
          // (4) 如果x 坐标小于了0 就让他停在0 的位置
          // 遮挡层的最大移动距离
          // 卡边界
          var maskMax = preview_img.offsetWidth - mask.offsetWidth;
          if (maskX <= 0) {
            maskX = 0;
          } else if (maskX >= maskMax) {
            maskX = maskMax;
          }
          if (maskY <= 0) {
            maskY = 0;
          } else if (maskY >= maskMax) {
            maskY = maskMax;
          }
          mask.style.left = maskX + 'px';
          mask.style.top = maskY + 'px';
          // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
          // 大图
          var bigIMg = document.querySelector('.bigImg');
          // 大图片最大移动距离
          var bigMax = bigIMg.offsetWidth - big.offsetWidth;
          // 大图片的移动距离 X Y
          var bigX = maskX * bigMax / maskMax;
          var bigY = maskY * bigMax / maskMax;
          bigIMg.style.left = -bigX + 'px';
          bigIMg.style.top = -bigY + 'px';
        })
      })
    </script>
</body>

</html>